<template>
  <div>
    <PageTools>
      <template #before>
        <span>共计{{ page.total }}条</span>
      </template>
      <template #after>
        <el-button type="danger" size="small" @click="onExport">员工导出</el-button>
        <el-button type="success" size="small" @click="$router.push('/import')">员工导入</el-button>
        <el-button type="primary" size="small" @click="showDialog = true">新增员工</el-button>
      </template>
    </PageTools>
    <el-table :data="list" border stripe>
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="姓名" prop="username" :sortable="true"></el-table-column>
      <el-table-column label="头像" prop="staffPhoto" :sortable="true">
        <template v-slot="{ row }" width="120">
          <img v-imgerror="require('@/assets/404_images/404.png')" style="max-width: 110px;border-radius: 50%;" :src="row.staffPhoto" alt="" @click="onShowQrcodeDialog(row.staffPhoto)">
        </template>
      </el-table-column>
      <el-table-column label="手机号" prop="mobile" :sortable="true"></el-table-column>
      <el-table-column label="工号" prop="workNumber" :sortable="true"></el-table-column>
      <el-table-column label="聘用形式" prop="formOfEmployment" :sortable="true">
        <template v-slot="{row}">
          {{ row.formOfEmployment | formatFormOfEmployment }}
        </template>
      </el-table-column>
      <el-table-column label="部门" prop="departmentName" :sortable="true"></el-table-column>
      <el-table-column label="入职时间" prop="timeOfEntry" :sortable="true">
        <template v-slot="{ row }">
          {{ row.timeOfEntry | formatDate }}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="enableState" :sortable="true">
        <template v-slot="{ row }">
          <el-switch
            v-model="row.enableState"
            disabled
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="" :sortable="true" width="300" fixed="right">
        <template v-slot="{row}">
          <el-button type="text" @click="$router.push('/employess/detail/' + row.id)">查看</el-button>
          <el-button type="text">转正</el-button>
          <el-button type="text">调岗</el-button>
          <el-button type="text">离职</el-button>
          <el-button type="text" @click="onShowAsignRoleDialog(row.id)">角色</el-button>
          <el-button type="text" @click="onDel(row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
      layout="total,prev, pager, next"
      :total="page.total"
      @current-change="CurrentChange"
    >
    </el-pagination>
    <!-- 二维码对话框 -->
    <el-dialog
      title="二维码"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-row type="flex" justify="center">
        <qrcode-vue :value="imgUrl" size="100" level="H"></qrcode-vue>
      </el-row>
    </el-dialog>
    <!--新增弹窗  -->
    <AddEmp v-if="showDialog" :show-dialog.sync="showDialog" />
    <!-- 角色弹窗 -->
    <el-dialog title="分配角色" :visible.sync="showAsignRoleDialog">
      <el-checkbox-group v-model="selectedRoleList">
        <el-checkbox v-for="(item,idnex) in roleList" :key="idnex" :label="item.id">{{ item.name }}</el-checkbox>
      </el-checkbox-group>
      <el-row type="flex" justify="center">
        <el-button type="primary" size="small" @click="onAsignRole">确定</el-button>
        <el-button type="info" size="small" @click="showAsignRoleDialog = false">取消</el-button>

      </el-row>

    </el-dialog>
  </div>
</template>

<script>
import { getEmployeesAPI, delEmployeeAPI } from '@/api'
import { getRoleList } from '@/api/setting'
import { assignRoles } from '@/api/emplovees.js'
import { getEmployeeBaseInfo } from '@/api/user.js'
import QrcodeVue from 'qrcode.vue'
import AddEmp from './components/add-emp.vue'
import { dataFormatArr } from '@/utils'

// import { pick } from 'loadsh'
export default {
  name: 'Employess',
  components: { QrcodeVue, AddEmp },
  data() {
    return {
      showAsignRoleDialog: false, // 角色弹窗开关
      roleList: [], // 候选的角色
      selectedRoleList: [], // 选中的
      currentId: undefined,
      list: [],
      page: {
        page: 1,
        size: 9,
        total: 0
      },
      dialogVisible: false,
      imgUrl: '',
      showDialog: false, // 新增弹窗
      showAsignPermDialog: false // 控制对话框显示
    }
  },
  created() {
    // 调用接口获取数据
    this.getEmployees()
  },
  mounted() {},
  methods: {
    // 获取数据
    async getEmployees() {
      const { total, rows } = await getEmployeesAPI(this.page)
      this.page.total = total
      this.list = rows
    },
    // 翻页
    CurrentChange(val) {
      this.page.page = val
      // 调用接口获取数据
      this.getEmployees()
    },
    // 打开二维码弹窗
    onShowQrcodeDialog(imgUrl) {
      this.imgUrl = imgUrl
      this.dialogVisible = true
    },
    // 删除员工
    async onDel(id) {
      this.$confirm('确认删除？')
        .then(async _ => {
          try {
            await delEmployeeAPI(id)
            this.$message.success('操作成功')
          } catch (error) {
            this.$message.error('删除失败')
          }
        })
        .catch(_ => {})
    },
    // 导出员工
    onExport() {
      import('@/vendor/Export2Excel').then(async excel => {
        const { rows } = await getEmployeesAPI({ page: 1, size: this.page.total })
        const headers = {
          '手机号': 'mobile',
          '姓名': 'username',
          '入职日期': 'timeOfEntry',
          '聘用形式': 'formOfEmployment',
          '转正日期': 'correctionTime',
          '工号': 'workNumber',
          '部门': 'departmentName'
        }
        // const data = rows.map(item => {
        //   const o = pick(item, Object.values(headers))
        //   return Object.values(o)
        // })
        const data = await dataFormatArr(rows, Object.values(headers))
        excel.export_json_to_excel({
          header: Object.keys(headers), // 表头 必填
          data: data, // 具体数据 必填
          filename: 'excel-list', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    },
    // 打开角色对话框
    async onShowAsignRoleDialog(id) {
      this.currentId = id
      const { roleIds } = await getEmployeeBaseInfo(id)
      console.log(roleIds)
      this.selectedRoleList = roleIds
      this.roleList = (await getRoleList({ page: 1, size: 50 })).rows
      this.showAsignRoleDialog = true
    },
    // 角色分配确认按钮
    async onAsignRole() {
      await assignRoles({ id: this.currentId, roleIds: this.selectedRoleList })
      this.$message.success('操作成功')
      this.showAsignRoleDialog = false
    }

  }

}
</script>

<style lang="scss" scoped>

</style>
